<template>
	<i-popup v-if="showPopup" :closeData="{show: false}" :confirmData="{title: '我知道了'}" @confirm="showPopup = false">
		<view class="poup_title">门店已下线</view>
		<view class="poup_content">当前没有已上架的商品，门店已自动下线，请发布商品后再上线营业吧！</view>
	</i-popup>
	<i-popup v-if="onliePopup" :confirmData="{title: '去设置'}" @close="onliePopup = false" @confirm="toStore">
		<view class="poup_title">门店上线提示</view>
		<view class="poup_content">亲爱的老板，恭喜您成功发布商品，立刻上线门店开始赚钱吧！</view>
		<view class="poup_content">您也可以稍后在门店管理中设置</view>
	</i-popup>

	<i-drawers bodyHeight="600rpx" v-model="showSelect" @change="closeChange">
		<view class="select_bdy">
			<view class="bodys">
				<view class="body_title">
					状态
				</view>
				<view class="status_list">
					<view @click="selectStatus(item, index)" :key="index" v-for="(item,index) in status_list"
						:class="{active: activeStatus === index}" class="status_item">
						{{item.label}}
					</view>
				</view>
				<view class="buttons">
					<i-buttons radius="4" padding="18rpx 88rpx" size="32" color="#16161F" bgColor="#F3F4F5"
						@click="reset">重置</i-buttons>
					<view style="width: 20rpx;"></view>
					<i-buttons radius="4" padding="18rpx 88rpx" size="32" color="#fff" bgColor="#FB652E"
						@click="submit">确定</i-buttons>
				</view>
			</view>
		</view>
	</i-drawers>
	<view class="shop_manager">
		<view class="search">
			<i-search v-model="keyword" width="440rpx" margin="0" bgColor="#FFFFFF" placeholder="请输入商品名称" @change="confirmSearch" @clear="confirmSearch"></i-search>
			<view class="view" @click="showSelect = true">
				<text>{{selectStr || '筛选'}}</text>
				<image src="../../static/images/more_icon.png" mode=""></image>
			</view>
		</view>
		<i-moveSwiper v-if="pageList && pageList.length" v-model="currentPage" :show_line="true"
			:scrollList="swiper_list" size="28" margin="0" linHeight="4rpx" :swiperHeight="height" @change="change">
			<template #10003002>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[0]?.total"
					:pageTotal="pageList[0]?.list.length">
					<i-shopItem v-for="item in pageList[0]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003003>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[1]?.total"
					:pageTotal="pageList[1]?.list.length">
					<i-shopItem v-for="item in pageList[1]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003007>
				<view class="message">
					保养类商品无法编辑，可设置员工每升提成金额
				</view>
				<i-scrollList @more="more" height="calc(100vh - 88px)" :total="pageList[2]?.total"
					:pageTotal="pageList[2]?.list.length">
					<i-shopItem v-for="item in pageList[2]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003012>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[3]?.total"
					:pageTotal="pageList[3]?.list.length">
					<i-shopItem v-for="item in pageList[3]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003013>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[4]?.total"
					:pageTotal="pageList[4]?.list.length">
					<i-shopItem v-for="item in pageList[4]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003201>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[0]?.total"
					:pageTotal="pageList[0]?.list.length">
					<i-shopItem v-for="item in pageList[0]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003202>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[1]?.total"
					:pageTotal="pageList[1]?.list.length">
					<i-shopItem v-for="item in pageList[1]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003203>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[2]?.total"
					:pageTotal="pageList[2]?.list.length">
					<i-shopItem v-for="item in pageList[2]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003204>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[3]?.total"
					:pageTotal="pageList[3]?.list.length">
					<i-shopItem v-for="item in pageList[3]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003205>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[4]?.total"
					:pageTotal="pageList[4]?.list.length">
					<i-shopItem v-for="item in pageList[4]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003206>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[5]?.total"
					:pageTotal="pageList[5]?.list.length">
					<i-shopItem v-for="item in pageList[5]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
			<template #10003207>
				<i-scrollList @more="more" height="calc(100vh - 152px)" :total="pageList[6]?.total"
					:pageTotal="pageList[6]?.list.length">
					<i-shopItem v-for="item in pageList[6]?.list" :key="item.serviceId" :data="item"></i-shopItem>
				</i-scrollList>
			</template>
		</i-moveSwiper>
		<view class="flex_bottom" @click="toAdd" v-if="(storeInfo.merType === '0' && currentPage !== 2) || storeInfo.merType === '1'">
			<image src="../../static/images/add@2x.png"></image>
			添加商品
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		navTo,
		getWindowHeight
	} from '../../utils/common'
	import {
		getStoreGoodsList,
		getMeBusinessTypes,
		getLocalMeBusinessTypes
	} from '../../api/store'
	import {
		onShow,
	} from '@dcloudio/uni-app'
	import useStore from '../../stores/index'

	const store = useStore()
	const showPopup = ref(false)
	const skeleton = ref(true)
	const onliePopup = ref(false)
	const showSelect = ref(false)
	const selectStr = ref('')
	const keyword = ref('')

	const pageList = ref<any[]>([])
	const swiper_list = ref<any[]>([])

	const status_list = [
		{
			label: '全部',
			value: null
		},
		{
			label: '已上架',
			value: '0'
		},
		{
			label: '已下架',
			value: '1'
		},
	]

	const currentPage = ref(0)
	const currentPageIndex = ref(0)
	const selectType = ref('')
	const activeStatus = ref(0)
	const checkData = reactive({
		type: '',
		str: "",
		status: 0
	})

	const storeInfo = computed(() => {
		return store.storeInfo
	})

	const height = computed(() => {
		return getWindowHeight() - 88
	})

	const more = () => {
		pageList.value[currentPage.value].tyjPageNum++
		getgoodList()
	}
	const toAdd = () => {
		const currentIndex = storeInfo.value.merType == '1'? currentPageIndex.value: currentPage.value
		navTo('/pages/views/add_shop?businessType=' + pageList.value[currentIndex].businessType, 'navigateTo')
	}

    const confirmSearch = () => {
		clearList()
		getgoodList()
	}
	 
	const change = (e : { current : number }) => {
		const current = e.current
		if (!pageList.value[current].list.length) {
			getgoodList()
		}
	}

	const closeChange = () => {
		activeStatus.value = checkData.status
	}

	const selectStatus = (item : { label : string, value : string }, index : number) => {
		activeStatus.value = index
		checkData.str = item.label
		checkData.type = item.value
	}

	const reset = () => {
		selectStr.value = ''
		selectType.value = null
		showSelect.value = false
		clearList()
		getgoodList()
	}
	const submit = () => {
		showSelect.value = false
		selectStr.value = checkData.str
		selectType.value = checkData.type
		checkData.status = activeStatus.value
		clearList()
		getgoodList()
	}

	const getgoodList = async () => {
		uni.showLoading({
			mask: true,
			title: '加载中'
		})
		const currentIndex = storeInfo.value.merType == '1'? currentPageIndex.value: currentPage.value
		const data = await getStoreGoodsList({
			"tyjPageNum": pageList.value[currentIndex].tyjPageNum,
			"tyjPageSize": pageList.value[currentIndex].tyjPageSize,
			status: selectType.value,
			serviceType: pageList.value[currentIndex].businessType,
			keyword: keyword.value
		})
		pageList.value[currentIndex].list = pageList.value[currentIndex].list.concat(data.rows)
		pageList.value[currentIndex].total = data.total

		console.log(pageList.value, 'pageListpageList');
		uni.hideLoading()
		// checkUp()
	}

	const checkUp = async () => {
		const data = await getStoreGoodsList({
			"tyjPageNum": 1,
			"tyjPageSize": 1,
			status: '0',
			serviceType: '',
		})
		if (data.total === 1 && storeInfo.value.status !== '0') {
			onliePopup.value = true
			return
		}
		if (!data.total) {
			showPopup.value = true
		}
	}

	const toStore = () => {
		navTo('/pages/views/store_manager', 'navigateTo')
		onliePopup.value = false
	}

	const meBusinessTypes = async () => {
		const { data } = storeInfo.value.merType === '0'? await getMeBusinessTypes(): await getLocalMeBusinessTypes()
		data.map((item : { businessType : string, businessTypeLabel : string }) => {
			if(storeInfo.value.merType === '1'){
				if(storeInfo.value.businessType === item.businessType){
					swiper_list.value.push({
						id: item.businessType,
						title: item.businessTypeLabel
					})
				}
			}else{
				swiper_list.value.push({
					id: item.businessType,
					title: item.businessTypeLabel
				})
			}
			pageList.value.push({
					businessType: item.businessType,
					list: [],
					total: 0,
					tyjPageNum: 1,
					tyjPageSize: 15
				})
		})
		
		if(storeInfo.value.merType === '1'){
			const index = pageList.value.findIndex(i => i.businessType == storeInfo.value.businessType)
			currentPageIndex.value = index
		}

		getgoodList()
	}
	const clearList = () => {
		pageList.value.map(item => {
			item.list = []
			item.tyjPageNum = 1
			item.total = 0
		})
	}
	onShow(() => {
		clearList()
		if (pageList.value && pageList.value.length) {
			getgoodList()
		} else {
			meBusinessTypes()
		}
	})
</script>

<style lang="scss" scoped>
	.shop_manager {
		width: 100%;
		height: 100vh;
		overflow: hidden;
		background-color: $backColor;

		.search {
			width: calc(100% - 64rpx);
			margin: 16rpx auto;
			@include flexRS;

			.view {
				width: 144rpx;
				@include flexRC;
				@include dfont(26rpx);
				white-space: nowrap;

				image {
					margin-left: 8rpx;
					width: 20rpx;
					height: 12rpx;
				}
			}
		}

		.float {
			position: fixed;
			bottom: 40rpx;
			right: 40rpx;

			image {
				width: 104rpx;
				height: 104rpx;
			}
		}
	}

	.float_bottom {
		height: 148rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		background-color: #fff;
		border-top: 1rpx solid $backColor;
		@include flexRC;
		z-index: 8;
	}

	.poup_title {
		text-align: center;
		padding: 48rpx 0 32rpx 0;
		@include titlefont(32rpx);
	}

	.poup_content {
		text-align: center;
		padding-bottom: 48rpx;
		@include dfont;
	}

	.select_bdy {
		height: 600rpx;
		overflow-y: auto;

		.bodys {
			width: calc(100% - 64rpx);
			margin: 0 auto;

			.body_title {
				@include titlefont(28rpx);
				margin-bottom: 24rpx;
			}

			.status_list {
				@include flexR;
				flex-wrap: wrap;
				margin-bottom: 220rpx;
				width: 100%;

				.status_item {
					background: $background-color;
					border-radius: 40rpx;
					@include flexRC;
					@include dfont(28rpx);
					white-space: nowrap;
					border: 2rpx solid #F3F4F5;
					margin: 12rpx 10rpx;
					width: 202rpx;
					height: 80rpx;
				}

				.active {
					transition: all .3s ease-out;
					border: 2rpx solid #FB652E;
					color: #FB652E;
					background: rgba(251, 101, 46, 0.1);
				}
			}


			.buttons {
				width: 100%;
				@include flexRC;
			}
		}

	}

	.message {
		width: calc(100% - 64rpx);
		margin: 0 auto;
		height: 72rpx;
		@include dfont(26rpx);
		line-height: 72rpx;
		color: #8E8E93;
		padding-left: 32rpx;
		background: #FAFAFA;
		border-radius: 24rpx;
		margin-top: 20rpx;
	}
</style>